<template>
	<view class="content">
		<view class="dateTag">
			<uni-tag size="small" text="今日" @click="changeDate(1)" :type="dateType==1?'warning':'default'" :circle="true"></uni-tag>
			<uni-tag size="small" text="昨日" @click="changeDate(2)" :type="dateType==2?'warning':'default'" :circle="true"></uni-tag>
			<uni-tag size="small" text="本月" @click="changeDate(3)" :type="dateType==3?'warning':'default'" :circle="true"></uni-tag>
			<uni-tag size="small" text="上月" @click="changeDate(4)" :type="dateType==4?'warning':'default'" :circle="true"></uni-tag>
			<uni-tag size="small" text="今年" @click="changeDate(5)" :type="dateType==5?'warning':'default'" :circle="true"></uni-tag>
			<uni-tag size="small" text="累计" @click="changeDate(6)" :type="dateType==6?'warning':'default'" :circle="true"></uni-tag>
		</view>

		<view class="tj-sction">
			<view class="tj-item">
				<text class="num">{{statistic.orderCount}}</text>
				<text>订单数量</text>
			</view>
			<view class="tj-item">
				<text class="num">￥{{statistic.orderAmount}}</text>
				<text>订单金额</text>
			</view>
		</view>
		<view class="title">
			<view class="left">
				销售排行榜
			</view>
			<view class="right">
				<text :class="{'active':topType=='1'}" @click="topType='1'">数量</text>
				<text class="seperator">|</text>
				<text :class="{'active':topType=='2'}" @click="topType='2'">金额</text>
			</view>
		</view>
		<view class="row" v-for="item in statistic.topUnitProductList" v-if="topType=='1'">
			<text class="tit">{{item.productName}}</text>
			<text class="input">x {{item.productUnit}}</text>
		</view>
		<view class="row" v-for="item in statistic.topAmountProductList" v-if="topType=='2'">
			<text class="tit">{{item.productName}}</text>
			<text class="input">￥{{item.productAmount}}</text>
		</view>
		<view class="empty" v-if="topType=='1'&&statistic.topUnitProductList.length === 0">
			<image :src="setSrc" mode="aspectFit"></image>
		</view>
		<view class="empty" v-if="topType=='2'&&statistic.topAmountProductList.length === 0">
			<image :src="setSrc" mode="aspectFit"></image>
		</view>
	</view>
</template>

<script>
	import uniTag from '@/components/uni-tag/uni-tag';
	import empty from "@/components/empty";
	import {
		mapState,
		mapMutations
	} from 'vuex';
	var _self;
	var canvasObj = {};
	export default {
		components: {
			uniTag,
			empty
		},
		data() {
			return {
				dateType: 0,
				topType: '1',
				statistic: {},
				src: 'empty',
				typeSrc: {
					empty: ''
				}
			};
		},
		onLoad(options) {
			this.changeDate(1);
		},
		onReady() {
			//this.fillData();
		},
		computed: {
			setSrc() {
				return this.typeSrc[this.src];
			},
			...mapState(['hasLogin', 'merchantInfo', 'footPrint', 'applicationConfig'])
		},
		methods: {
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			changeDate(dateType) {
				this.dateType = dateType;
				let searchOptions = {};
				//选择日期
				let startDate = null;
				let endDate = null;
				let currentDate = new Date();
				if (dateType == 1) { //今天
					startDate = currentDate;
					endDate = currentDate;
				} else if (dateType == 2) { //昨天
					let tDate = new Date();
					tDate.setDate(currentDate.getDate() - 1);
					startDate = tDate;
					endDate = tDate;
				} else if (dateType == 3) { //本月
					let tDate = new Date();
					tDate.setDate(1);
					startDate = tDate;
					endDate = currentDate;
				} else if (dateType == 4) { //上月
					startDate = this.$api.dateutil.getFirstDayOfLastXMonth(1);
					endDate = this.$api.dateutil.getLastDayOfLastXMonth(1);
				} else if (dateType == 5) { //今年
					let tDate = this.$api.dateutil.getFirstDayOfThisYear();
					startDate = tDate;
					endDate = currentDate;
				} else if (dateType == 6) { //累计
					let tDate = new Date();
					tDate.setFullYear(currentDate.getFullYear() - 10);
					startDate = tDate;
					endDate = currentDate;
				}
				searchOptions.startDate = startDate;
				searchOptions.endDate = endDate;
				searchOptions.merchantUuid = this.merchantInfo.merchantUuid;
				//加载中
				this.$api.request.dataStatistic(searchOptions, res => {
					this.statistic = res.body.data;
				}, false);
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: $page-color-base;
	}

	.content {
		margin: 0 20upx;
	}

	%flex-center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	%section {
		display: flex;
		justify-content: space-around;
		align-content: center;
		background: #fff;
		border-radius: 10upx;
	}

	.tj-sction {
		margin-top: 40upx;
		padding: 10px 0;
		background-color: #FA436A;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
		@extend %section;

		.tj-item {
			@extend %flex-center;
			flex-direction: column;
			height: 140upx;
			font-size: $font-sm;
			color: #fff;
		}

		.num {
			font-size: $font-lg+5;
			color: #fff;
			margin-bottom: 8upx;
		}
	}

	.arc-title {
		color: $font-color-dark;
		font-size: $font-base;
		padding: 40upx 0 0 0;
		display: flex;
	}

	.arc-columns {
		display: flex;
		flex-direction: column !important;
	}

	.arc-common-mt {
		margin-top: 20upx;
	}

	.arc-bg-white {
		background: #FFFFFF;
	}

	.arc-title-bar {
		width: 100%;
		padding: 10upx 10upx;
		border-radius: 5px;
		flex-wrap: nowrap;
	}

	.arc-title-dot-light {
		border-left: 10upx solid #FA436A;
		padding-left: 10upx;
		font-size: 28upx;
		color: $font-color-base
	}

	.charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}

	.charts-rotate {
		width: 700upx;
		height: 1100upx;
		background-color: #FFFFFF;
	}

	/* 圆弧进度样式 */
	.arc-charts {
		width: 100%;
		height: 70upx;
		background-color: #FFFFFF;
		position: relative;
	}

	.charts {
		position: absolute;
		width: 250upx;
		height: 250upx;
		background-color: #FFFFFF;
	}

	.dateTag {
		display: flex;
		margin-top: 20px;
		flex-direction: row;
		justify-content: center;
	}
	.b-b{
		margin-top: 20upx;
	}
	.row {
		display: flex;
		align-items: center;
		position: relative;
		padding: 0 30upx;
		height: 110upx;
		background: #fff;
	
		.tit {
			flex-shrink: 0;
			width: 400upx;
			font-size: $font-base;
			color: $font-color-base;
		}
	
		.input {
			flex: 1;
			font-size: $font-base;
			color: $font-color-dark;
			text-align: right;
			label{
				margin-left: 20upx;
			}
			
		}
		.price {
			font-size: $font-lg;
			color: $font-color-dark;
		
			&:before {
				content: '￥';
				font-size: $font-sm;
				margin: 0 2upx 0 8upx;
			}
		}
	
		.icon-shouhuodizhi {
			font-size: 36upx;
			color: $font-color-light;
		}
	}
	.title{
		margin: 40upx 40upx 20upx 40upx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		.left{
			color: $font-color-dark;
			font-size: $font-base;
		}
		.right{
			color: $font-color-base;
			font-size: $font-base;
			.active{
				color: $uni-color-primary;
			}
			.seperator{
				margin: 0 10upx;
			}
		}
	}
	.empty{
		margin-top: 80upx;
		text-align: center;
		image {
			width: 200upx;
			height: 200upx;
		}
	}
</style>
